<template>
    <div class="container">
        <h1>登录</h1>
        <el-form
                :label-position="'left'"
                label-width="100px"
                :model="loginData"
                style="max-width: 460px"
        >
            <el-form-item label="邮箱">
                <el-input
                    v-model="loginData.email"
                    placeholder="请输入邮箱"
                    clearable
                    prefix-icon="User"
                />
            </el-form-item>
            <el-form-item label="密码">
                <el-input
                    v-model="loginData.password"
                    placeholder="请输入密码"
                    show-password
                    clearable
                    prefix-icon="Key"
                />
            </el-form-item>
        </el-form>
            <el-button type="primary" @click="loginCommand">登录</el-button>
            <el-button type="primary" @click="gotoRegister">前往注册</el-button>
    </div>
</template>

<script lang="ts">

import {reactive} from 'vue'
import {login} from "@/api/Auth.ts";
import {ElMessage} from "element-plus";


export default {
    data(){
        return{
            loginData:reactive({
                email: '',
                password: '',
            })
        }
    },
    methods:{
        loginCommand(){
            const data=new FormData()
            data.append("email",this.loginData.email)
            data.append("password",this.loginData.password)
            login(data).then(response=>{
                ElMessage.success("登录成功！")
                window.localStorage.setItem("cloudToken",response.data.data)
                setTimeout(()=>{
                    this.$router.push({name:'backend'})
                },3000)
            }).catch((error)=>{
                ElMessage.error(error.response.data.data)
            })
        },
        gotoRegister(){
            this.$router.push({name:'register'})
        }
    }
}





</script>

<style scoped>
  .container{
      text-align: -webkit-center;
  }
</style>